// 面向对象 / 面向过程

// 定义一个红绿灯类(构造函数)
function Light($box,id) {
  // 装红绿灯的容器
  this.box = document.querySelector($box);
  // 初始值
  this.index = 1;
  this.id = id;
}








// 初始化图片方法
Light.prototype.init = function () {
  if (this.id ===3){
    this.index = 3;

  }else {
    this.index//因为挂载到原型上了，可以通过this直接获取
}
 
  console.log('初始化图片');
  // 创建图片标签
  this.img = new Image();
  // 图片设置不可拖拽
  this.img.draggable = false;
  this.img.src = `./img/${this.index}.jpeg`;
  // 添加到容器中
  this.box.appendChild(this.img);
  // 初始化完成之后绑定点击事件
  this.bindClick();

  if (this.flag === 3) {
    this.bindClick2();
   
} else {
    this.bindClick();//因为挂载到原型上了，可以通过this直接获取
}



  
};




// 绑定点击事件
Light.prototype.bindClick = function () {
  this.img.addEventListener('click', () => {
    this.index = (this.index % 3) + 1;
    // 判断图片是否超出范围 1-3
    // this.index > 3 && (this.index = 1);
    // 修改图片地址
    this.img.src = `./img/${this.index}.jpeg`;
  });
};


Light.prototype.bindClick2 = function () {
  this.img.addEventListener('click', () => {

    this.index = (this.index ) - 1;
   
   
  
    // this.index = (this.index % 3) + 1
    // 判断图片是否超出范围
    this.index < 1 && (this.index = 3);
    // 修改图片地址
   

    // 判断图片是否超出范围 1-3
    // this.index > 3 && (this.index <=1);
    // 修改图片地址
    this.img.src = `./img/${this.index}.jpeg`;
  });
};


Light.prototype.time= function () {
  

  this.img.addEventListener('mouseleave',()=>{
    let b2=0;
     this.b2 = setInterval(() => {

      this.index = (this.index % 3) +1;
    
      this.img.src = `./img/${this.index}.jpeg`;
  
  
    },1000)


  })

  this.img.addEventListener('mouseenter',()=>{
    clearInterval(this.b2);
    


  })
  
};